<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

</head>

<body>
    <div id="commodity">
        <app :logs='logs' :products='products'></app>
    </div>
</body>
<script>
    //props:子组件, template:样板，模型, components:组件
    //1.创建实例new Vue,设置目录log下的id和name，产品下的cid(commodityid)，name和img链接，然后定义组件：app
    //2.创建app组件，建立子组件['logs', 'products']，建立模块中html循环语句，绑定局部组件，定义组件:log, product
    //3.创建局部组件对象
    //4.动态绑定：组件app中创建一个methods，choice的方法来获取点击，然后在html中绑定@click.native点击事件，通过v-show来通过id显示对应的商品
    //5.style样式修改

    //参考：https://www.php.cn/js-tutorial-405444.html
    let product = {
        props: ['product'],
        template: "<div><li><img :src='product.img' width='100px'><br>{{product.name}}</li></div>"
    }

    let log = {
        props: ['log'],
        template: "<div>{{log.id}}{{log.name}}</div>"
    }

    let app = {
        methods: {
            choice: function (i) {
                this.cid = i;
            }
        },
        data: function () {
            return { cid: 1 }; //默认显示cid为2的商品
        },
        props: ['logs', 'products'],
        template: "<div>"
            + "<log class='log' v-for='log in logs' :log='log' @click.native='choice(log.id)'></log>"
            + "<product class='product' v-for='product in products' :product='product' v-show='(cid==product.cid)'></product>"
            + "</div>",
        components: {
            log,
            product,
        }
    }

    new Vue({
        el: "#commodity",
        data: {
            logs: [
                {
                    id: 1,
                    name: '手机',
                },
                {
                    id: 2,
                    name: '配件',
                }
            ],
            products: [
                {
                    cid: 1,
                    name: '苹果',
                    img: 'https://img13.360buyimg.com/n7/jfs/t1/113193/29/20766/35565/6227d13dE075d2e5f/dda8594cdee01aa8.jpg',
                },
                {
                    cid: 1,
                    name: '华为',
                    img: 'https://img14.360buyimg.com/n7/jfs/t1/198531/37/20970/179596/62412c99E5496c3b9/d3283b556a61362a.jpg',
                },
                {
                    cid: 1,
                    name: 'vivo',
                    img: 'https://img14.360buyimg.com/n7/jfs/t1/99911/23/28317/148231/6253d84fE053e6322/a184745e830e8a72.jpg',
                },
                {
                    cid: 2,
                    name: '充电器',
                    img: 'https://img13.360buyimg.com/n7/jfs/t1/138557/25/24317/267932/619d940aE80b82399/78319862c1ace8e5.jpg',
                },
                {
                    cid: 2,
                    name: '手机壳',
                    img: 'https://img13.360buyimg.com/n7/jfs/t1/131611/2/23179/318846/62457e57E0bc96b27/547f968fcbec81aa.jpg',
                },
                {
                    cid: 2,
                    name: '手机膜',
                    img: 'https://img14.360buyimg.com/n7/jfs/t1/197926/40/10751/272560/61541c7cE454f745d/8835ad348531cabb.jpg',
                },
            ]
        },
        components: {
            app,
        }
    })
</script>

</html>